<template>
	<view class="tabbar-container">
		<view v-for="(item,index) in tabbarList" :class="[item.centerItem && 'center-item'  ,'tabbar-item']"
			@click="changeItem(item)" :key="item.id">
			<view class="item-top">
				<image v-if="item.id!==2" :src="activeTab===item.path?item.selectIcon:item.icon"
					:class="[activeTab===item.path&&'active']"></image>
				<text v-else class="iconfont icon-jia"></text>
				<!-- <view class="notification-dot" v-if="item.id==3 && hasNew==true"></view> -->
			</view>
			
			<view :class="[activeTab===item.path ? 'item-active' : '','item-bottom']">
				<text class="text">{{item.text}}</text>
			</view>
		</view>
 
		<u-action-sheet class="action-sheet" round="20" :show="sheetShow" title="编写" @close="handleClose">
			<view class="gutter">
				
				<view class="action-item dynamic" @click="writeDynamic">
				    <view class="item-content">
				        <view class="text">
				            <text class="item-title">写动态</text>
				            <text class="item-description">分享你的动态</text>
				        </view>
				        <image class="item-image" src="@/static/img/writeDynamic.png" mode="aspectFit"></image>
				    </view>
				</view>
				
				<view class="action-item blog" @click="writeBlog">
				    <view class="item-content">
				        <view class="text">
				            <text class="item-title">写博客</text>
				            <text class="item-description">记录你的想法</text>
				        </view>
				        <image class="item-image" src="@/static/img/writeBlog.png" mode="aspectFit"></image>
				    </view>
				</view>


			</view>
		</u-action-sheet>
	</view>
</template>
 
<script>
	import {
		mapGetters,
		mapState
	} from "vuex"
	export default {
		name:"myTabBar",
		data() {
			return {
				//e0620d
				currentItem: 3,
				tabbarList: [{
					id: 0,
					path: "/pages/index/index",
					icon: "/static/img/tabbar_index.png",
					selectIcon: "/static/img/tabbar_index_selected.png",
					text: "首页",
					centerItem: false
				}, {
					id: 1,
					path: "/pages/leisure/leisure",
					icon: "/static/img/tabbar_leisure.png",
					selectIcon: "/static/img/tabbar_leisure_selected.png",
					text: "娱乐",
					centerItem: false
				}, {
					id: 2,
					icon: "/static/img/playon.png",
					selectIcon: "/static/img/playon_fill.png",
					text: "",
					centerItem: true
				}, {
					id: 3,
					path: "/pages/message/message",
					icon: "/static/img/tabbar_message.png",
					selectIcon: "/static/img/tabbar_message_selected.png",
					text: "消息",
					centerItem: false
				}, {
					id: 4,
					path: "/pages/home/home",
					icon: "/static/img/tabbar_home.png",
					selectIcon: "/static/img/tabbar_home_selected.png",
					text: "我的",
					centerItem: false
				}],
				sheetShow: false,
				hasNew:false,
				images: []
			};
		},
		computed: {
		        ...mapGetters(['activeTab']),
		    },
		watch:{

		},
		created() {
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			this.$store.commit('setActiveTab', '/' + curRoute);
		},
		mounted() {
			uni.hideTabBar();
		},
		methods: {
			changeItem(item) {
				
				if (item?.path) {
					var pages = getCurrentPages();
					var page = pages[pages.length - 1].route;
					if (item.path == '/' + page) return
					this.$store.commit('setActiveTab', item.path);
					uni.switchTab({
						url: item.path,
					})
					if(item.path=='/pages/message/message'){
						console.log("已读")
						this.hasNew=false
						console.log("hasNew",this.hasNew)
						uni.setStorageSync('tabBarHasNew',this.hasNew)
					}
				} else {
					this.sheetShow = !this.sheetShow;
				}
			},
			//关闭快捷操作
			handleClose() {
				this.sheetShow = false;
			},
			 writeDynamic() {
				 console.log("写动态");
				 uni.navigateTo({
				     url: `/pages/writeDynamicPost/writeDynamicPost`,
				 });
				 this.handleClose(); // 关闭 Action Sheet
			},
			writeBlog() {
				console.log("写博客");
				uni.navigateTo({
				    url: `/pages/writeBlogPost/writeBlogPost`,
				});
				this.handleClose(); // 关闭 Action Sheet
			}
		},
	}
</script>
<style lang="scss" scoped>
	.tabbar-container {
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    width: 100%;
	    height: 100rpx;
	    border-top: 4rpx solid #e4e4e4;
	    display: flex;
	    align-items: center;
	    color: #999999;
	    z-index: 200;
	    background-color: #fff;
	
	    .tabbar-item {
	        width: 20%;
	        height: 100%;
	        display: flex;
	        flex-direction: column;
	        justify-content: space-around;
	        align-items: center;
	        text-align: center;
			
	        .item-top {
	            width: 50rpx;
	            height: 50rpx;
				position: relative;
	            >image {
	                width: 100%;
	                height: 100%;
	            }
	
	            .active {
	                animation: mymove 1s 1;
	            }
	
	            @keyframes mymove {
	                0% {
	                    transform: scale(1);
	                }
	                10% {
	                    transform: scale(0.8);
	                }
	                30% {
	                    transform: scale(1.1);
	                }
	                50% {
	                    transform: scale(0.9);
	                }
	                70% {
	                    transform: scale(1.05);
	                }
	                90% {
	                    transform: scale(1);
	                }
	            }
	        }
	
	        .item-bottom {
	            font-size: 26rpx;
	            width: 100%;
	        }
	    }
	
	    .center-item {
	        display: block;
	        position: relative;
	
	        .item-top {
	            flex-shrink: 0;
	            width: 100rpx;
	            height: 100rpx;
				position: relative;
	            top: -50rpx; /* 调整这个值，使其更下凹 */
	            left: calc(50% - 50rpx);
	            border-radius: 50%;
	            box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.16);
	            background-color: #ff6a00;
	
	            .iconfont {
	                position: absolute;
	                left: 50%;
	                top: 50%;
	                transform: translate(-50%, -50%);
	                font-size: 70rpx;
	                font-weight: 500;
	                color: #fffefd;
	            }
	        }
	
	        .item-bottom {
	            position: absolute;
	            bottom: 5rpx; /* 调整这个值，确保文本位置合适 */
	        }
	    }
	
	    .item-active {
	        color: #ff6a00;
	    }
	
	    .action-sheet {
	        .gutter {
	            display: flex;
	            margin-top: 20rpx;
	            margin-bottom: 40rpx;
				//height: 500rpx;
				justify-content: space-around; /* 居中对齐 */
				align-items: center; /* 垂直居中 */
				padding: 15px; /* 内边距 */
				.action-item {
					
				    background-color: #f0f0f0; /* 背景颜色 */
				   // color: ; /* 文本颜色 */
				    cursor: pointer; /* 鼠标悬停时显示为指针 */
				    width: 300rpx; /* 固定宽度 */
				    height: 200rpx; /* 固定高度 */
				    display: flex; /* 使用 flexbox 布局 */
				    align-items: center; /* 垂直居中 */
				    margin: 0 10rpx; /* 左右间距 */
				    border-radius: 50rpx; /* 圆角 */
				    transition: background-color 0.3s; /* 过渡效果 */
				    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1); /* 添加阴影 */
				}
				.dynamic {
				    background-color:#fff8e1; /* 写动态的背景颜色 */
				}
				
				.blog {
				    background-color:  #f0f8ff; /* 写博客的背景颜色 */
				}
				.item-content {
				    display: flex; /* 使用 flexbox 布局 */
				    justify-content: space-between; /* 左右分隔 */
				    width: 100%; /* 充满整个 action-item */
					height: 70%;
					box-sizing: border-box;
				    padding: 0 20rpx; /* 内边距 */
					position: relative;
				}
				.text{
					//background-color: red;
					padding:10rpx ;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					.item-title {
						color: #000;
					    font-size: 30rpx; /* 题目文字大小 */
					    font-weight: bold; /* 题目加粗 */
					}
					.item-description {
						margin-top: 10rpx;
					    font-size: 24rpx; /* 普通文本大小 */
					    color: #555; /* 普通文本颜色 */
					}
				}		
				.item-image {
					position: absolute;
					right: 20rpx;
					bottom: 10rpx;
					//background-color: #F1C40F;
				    width: 80rpx; /* 图片宽度 */
				    height: 80rpx; /* 图片高度 */
				}
				
				.action-item:hover {
				  background-color: #e0e0e0; /* 悬停时的背景颜色 */
				   box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.5); /* 添加阴影 */
				}
				.item {
	                flex: 1;
	
	                &:last-child {
	                    margin-right: 0;
	                }
	
	                .iconfont {
	                    font-size: 56rpx;
	                }
	
	                .yellow {
	                    color: #F1C40F;
	                }
	
	                .purple {
	                    color: #9B59B6;
	                }
	
	                .turquoise {
	                    color: #1ABC9C;
	                }
	
	                .disabled {
	                    color: #ccc;
	                }
	            }
				
				
	        }
	    }
	}
</style>